<template>
	<view class="my">
		<view class="header">
			<view class="user" v-if="token">
				<view class="avatar">
					<image src="/static/avatar.jpg" mode=""></image>
				</view>
				<view class="userinfo">
					<view class="top">
						<view class="username">
							熊猫
						</view>
						<view>

							<uni-icons type="compose" color="#fff" size="44rpx"></uni-icons>
						</view>
					</view>
					<text>用一句话介绍自己...</text>
				</view>

			</view>

			<view class="user" @click="toLogin" v-else>
				<view class="avatar">
					<image src="/static/images/Q3.png" mode=""></image>
				</view>
				<view class="userinfo">
					<view class="top">
						<view class="username">
							点击登录
						</view>

					</view>

				</view>

			</view>

			<uni-icons class="set" type="gear-filled" color="#fff" size="52rpx"></uni-icons>
		</view>

		<view class="main">
			<view class="item">
				<uni-icons custom-prefix="iconfont" type="icon-wenjian1" size="50rpx" color="#54c3f1" @click="toNote">
				</uni-icons>
				<text>个人简历</text>
			</view>
			<view class="item" @click="toSendlist">

				<uni-icons custom-prefix="iconfont" type="icon-zhifeiji" size="50rpx" color="#64af58"></uni-icons>
				<text>已投简历</text>
			</view>
			<view class="item" @click="toCollect">

				<uni-icons custom-prefix="iconfont" type="icon-star__easyico" size="50rpx" color="#ff8a02"></uni-icons>
				<text>我的收藏</text>
			</view>
		</view>

		<view class="list">
			<view class="option control">
				<view class="left">
					<uni-icons type="plus" size="32rpx" color="#000"></uni-icons>
					<view class="text">
						管理求职意向
					</view>
				</view>
				<view class="right">
					<view class="think">
						在职-考虑机会
					</view>
					<uni-icons type="forward" size="32rpx" color="#999"></uni-icons>
				</view>
			</view>

			<view class="option">
				<view class="left">
					<uni-icons type="home" size="32rpx" color="#000"></uni-icons>
					<view class="text">
						个人主页
					</view>
				</view>
				<view class="right">
					<uni-icons type="forward" size="32rpx" color="#999"></uni-icons>
				</view>
			</view>

			<view class="option">
				<view class="left">
					<uni-icons type="heart" size="32rpx" color="#000"></uni-icons>
					<view class="text">
						关注公司
					</view>
				</view>
				<view class="right">
					<uni-icons type="forward" size="32rpx" color="#999"></uni-icons>
				</view>
			</view>

			<view class="option" @click="logOut">
				<view class="left">
					<uni-icons type="gear" size="32rpx" color="#000"></uni-icons>
					<view class="text">
						退出登录
					</view>
				</view>
				<view class="right">
					<uni-icons type="forward" size="32rpx" color="#999"></uni-icons>
				</view>
			</view>

			<view class="option question">
				<view class="left">
					<uni-icons type="chatboxes" size="32rpx" color="#000"></uni-icons>
					<view class="text">
						常见问答
					</view>
				</view>
				<view class="right">
					<uni-icons type="forward" size="32rpx" color="#999"></uni-icons>
				</view>
			</view>

			<view class="option help">
				<view class="left">
					<uni-icons type="info" size="32rpx" color="#000"></uni-icons>
					<view class="text">
						帮助与反馈
					</view>
				</view>
				<view class="right">
					<uni-icons type="forward" size="32rpx" color="#999"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: localStorage.getItem("token") || "",
				userInfo: JSON.parse(localStorage.getItem("userInfo")) || [],
			};
		},
		onShow() {
			this.token=localStorage.getItem("token") || "";
			this.userInfo=JSON.parse(localStorage.getItem("userInfo")) || [];
		},
		methods: {
			toSendlist() {
				uni.navigateTo({
					url: "/pages/sendlist/sendlist"
				})
			},
			toCollect() {
				uni.navigateTo({
					url: "/pages/collect/collect"
				})
			},
			toNote() {
				uni.navigateTo({
					url: "/pages/note/note"
				})
			},
			toLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			//退出登录
			logOut(){
				if(this.token){
					this.token = "";
					this.userInfo = [];
					localStorage.setItem(
						"userInfo",
						JSON.stringify(this.userInfo)
					);
					localStorage.setItem("token", this.token);
					uni.showToast({
						title: `退出登录`,
						icon: 'none'
					})
					
				}else{
					uni.showToast({
						title: `您还没有进行登录`,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.my {
		.header {
			height: 350rpx;
			position: relative;

			.set {
				position: absolute;
				top: 40rpx;
				right: 30rpx;
			}

			.user {
				height: 350rpx;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				padding: 0rpx 30rpx;
				background-color: #64af58;

				.avatar {
					width: 140rpx;
					height: 140rpx;
					margin-right: 24rpx;
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
					}
				}

				.userinfo {
					.top {
						display: flex;
						// justify-content: end;
						align-items: flex-end;

						.username {
							font-size: 40rpx;
							font-weight: bold;
							color: #fff;
							margin-right: 20rpx;
						}

					}

					text {
						font-size: 24rpx;
						color: #fff;
					}
				}
			}
		}

		.main {
			margin: 0rpx 30rpx;
			height: 160rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			border-radius: 20rpx;
			box-shadow: 2rpx 2rpx 2rpx 2rpx #f4f4f4;
			position: relative;
			top: -80rpx;
			left: 0;
			background-color: #fff;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;

				text {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #000;
				}
			}
		}

		.list {
			padding: 0rpx 30rpx;

			.option {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				.left,
				.right {
					display: flex;
					align-items: center;

					text {
						font-size: 32rpx;

						color: #000;
						margin-right: 20rpx;
					}
				}

				.right {
					.think {
						font-size: 24rpx;
						color: #999;
						margin-right: 20rpx;
					}

					text {
						margin: 0;
					}
				}
			}

			.control {
				padding-bottom: 40rpx;
				padding-top: 0;
				border-bottom: 2rpx solid #f4f4f4;
			}

			.question {
				padding-bottom: 40rpx;
				padding-top: 20rpx;
				border-bottom: 2rpx solid #f4f4f4;
			}

			.help {
				padding-top: 40rpx;
			}
		}
	}
</style>
